<template>
  <div class="table-page-search-wrapper">
    <a-card>
      <a-form layout="vertical">
        <a-row :gutter="48">
          <a-col :md="6" :sm="12">
            <a-form-item label="开课学年">
              <a-select allowClear v-model="queryParam.kkxn">
                <a-select-option v-for="i in TYPE0125" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
              <a-form-item label="开课学期">
                <a-select allowClear v-model="queryParam.kkxqm">
                  <a-select-option v-for="i in TYPE0072" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
                <a-form-item label="开课院系">
                    <a-select allowClear v-model="queryParam.kkyxm" @change="yxChange" showSearch :filterOption="filterOption">
                        <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh }}-{{ i.dwmc }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="课程代码">
                <a-input v-model="queryParam.kcbm"/>
              </a-form-item>
            </a-col>
          <template v-if="advanced">
            <!-- <a-col :md="8" :sm="12">
              <a-form-item label="课程名称">
                <a-select
                  allowClear
                  v-model="queryParam.kcmc"
                  @search="handleSearch"
                  showSearch
                  :filterOption="false"
                  :notFoundContent="null"
                  placeholder="请先选择院系并输入课程名称搜索">
                  <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>{{ selectMenu.courseList}}
                  <a-select-option v-for="(i,index) in selectMenu.courseList" :key="index" :value="i.kch">{{ i.kcmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="6" :sm="12">
              <a-form-item label="课程名称">
                <a-select allowClear v-model="queryParam.kcbm" showSearch :filterOption="filterOption" placeholder="请先选择院系并输入课程名称搜索">
                  <a-select-option v-for="i in selectMenu.courseList" :key="i.id" :value="i.kch">{{i.kch}}-{{ i.kcmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="任课教师">
                <a-input v-model="queryParam.rkjsxm"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="状态">
                <a-select allowClear v-model="queryParam.pjzt">
                  <a-select-option value="1">已评教</a-select-option>
                  <a-select-option value="-1">未评教</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons" >
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button @click="resetForm">重置</a-button>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card :bordered="false" style="margin-top: 10px">
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        :alert="{ show: false }"
        :pageSize="parameter.pageSize"
        :pageNum="parameter.pageNum"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 + (parameter.pageNo - 1) * parameter.pageSize }}
        </span>
        <template slot="operation" slot-scope="a,b">
            <a v-if="b.id" @click="showDetail(b)">详情</a>
            <a v-else-if="b.isyxpj" @click="showDetail(b)">评教</a>
        </template>
      </s-table>
    </a-card>
          <com-teach-detail :visible="detailVisible" @cancel="detailVisible = false;$refs.table.refresh(true)" :confirmLoading="confirmLoading"
           :courseInfo="courseInfo" :typeUser="typeUser"/>
  </div>
</template>

<script>
import { STable } from '~'
import { mapState } from 'vuex'
import comTeachDetail from './comTeachDetail'
// import courseDetail from '../courseDetail'
// import searchMixin from '@/utils/searchRemain'

export default {
//   mixins: [ searchMixin ],
  data () {
    return {
      advanced: true,
      queryParam: {kkxn: '',kkxqm: ''},
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '课程代码',
          dataIndex: 'kcbm'
        },
        {
          title: '课程名称',
          dataIndex: 'kcmc'
        },
        {
          title: '开课学年',
          dataIndex: 'kkxn'
        },
        {
          title: '开课学期',
          dataIndex: 'kkxqm',
          customRender: (value, row, index) => {
               if(value == 1){
                   return '秋季学期'
               }else{
                   return '春季学期'
               }
           }
        },
        {
          title: '开课院系',
          dataIndex: 'kkyxmc',
          // customRender: (value, row, index) => {
          //   return row.kkyxm + '-' + value
          // }
        },
        {
          title: '任课教师',
          dataIndex: 'rkjsxm'
        },
        // {
        //   title: '评教结束日期',
        //   dataIndex: 'pjjsrq'
        // },
        {
          title: '评教时间',
          dataIndex: 'createDate'
        },
        {
          title: '状态',
          dataIndex: 'pjzt',
          customRender: (value, row, index) => {
               if(row.id){
                   return '已评教'
               }else{
                   return '未评教'
               }
           }
        },
        {
          title: '操作',
          width: '160px',
          dataIndex: 'operation',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      parameter: {
        pageNo: 1,
        pageSize: 10
      },
      loadData: parameter => {
        if(!this.initDone) return
        this.parameter = parameter
        parameter.pageNum = parameter.pageNo
        let params = Object.assign(this.queryParam, parameter)
        return this.$api.student.ddComTeachList(params).then(res => {
          return {
            data: res.data.rows,
            pageNo: parameter.pageNum,
            pageSize: parameter.pageSize,
            totalPage: Math.ceil(res.data.total / parameter.pageSize),
            totalCount: res.data.total
          }
        })
      },
      selectMenu: {
        yx: []
      },
      detailVisible: false,
      confirmLoading: false,
      courseInfo: {},
      initDone: false,
      kcLoading: false,
      typeUser: 'dd',
    }
  },
  components: {STable,comTeachDetail},
  computed: {
    ...mapState({
      TYPE0125: state => state.app['TYPE0125'],
      TYPE0072: state => state.app['TYPE0072'],
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/sysInfo').then(res => {
      console.log(res,11)
      this.initDone = true
      this.queryParam.kkxn = res.schoolYear
      this.queryParam.kkxqm = res.currentSemester
      this.$refs.table.refresh()
    })
    this.initSelectMenu()
    let that = this
      that.$api.student.ddReviewIsyxpj().then(res => {
          console.log(res)
          if(res.data == false){
              that.$error({
                  title: '未在评教时间内',
                  onOk() {
                    that.$router.back()
                  }
              });
          }           
      })
  },
  
  methods: {
    showDetail (course) {
    //   this.confirmLoading = true
      this.courseInfo = course
      this.detailVisible = true
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    //  initSelectMenu () {
    //   let allRequest = [
    //     this.$api.base.collegeAll(),
    //     this.$store.dispatch('app/sysInfo')
    //   ]
    //   Promise.all(allRequest).then(res => {
    //     this.selectMenu = {
    //       yxList: res[0].data
    //     }
    //     console.log(res[0].data,111)
    //     this.queryParam.kcyx = res[0].data[0].dwh
    //     this.yxChange(this.queryParam.kcyx)
    //     if(this.selectMenu.yxList && this.selectMenu.yxList.length == 1){
    //       this.$set(this.queryParam, 'kcyx', this.selectMenu.yxList[0].dwh)
    //       this.yxChange(this.queryParam.kcyx)
    //     }
    //     this.initDone = true
    //   })
    // },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$store.dispatch('app/sysInfo')
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        }
        this.$set(this.queryParam, 'kkxqm', res[1].currentSemester)
        this.$set(this.queryParam, 'kkxn', res[1].schoolYear)
        if(this.selectMenu.yxList && this.selectMenu.yxList.length == 1){
          this.$set(this.queryParam, 'kkyxm', this.selectMenu.yxList[0].dwh)
        }
        this.initDone = true
      })
    },
    yxChange (code) {
      this.$set(this.queryParam, 'kcbm', '')
      if (code) {
        this.kcLoading = true
        this.$api.cultivate.courseAll({kcssyxm: code}).then(res => {
          this.$set(this.selectMenu, 'courseList', res.data)
        }).finally(() => {
          this.kcLoading = false
        })
      } else {
        this.$set(this.selectMenu, 'courseList', [])
      }
    },
    // FIXME 课程选择
    // fetch(value){
    //   const code = this.queryParam.kcyx
    //   if (code && value && value.length>=2) {
    //     this.kcLoading = true
    //     this.$api.cultivate.courseAll({kcssyxm: code, kcmc: value}).then(res => {
    //       this.$set(this.selectMenu, 'courseList', res.data)
    //     }).finally(() => {
    //       this.kcLoading = false
    //     })
    //   } else {
    //     this.$set(this.selectMenu, 'courseList', [])
    //   }
    // },
    // handleSearch (value) {
    //   this.fetch(value)
    // },
    resetForm () {
      this.queryParam = {}
      this.$refs.table.refresh()

      // this.selectMenu.zy = []
    }
  }
}
</script>

<style>

</style>
